<template>
    <div id="app">
        <headerVue @add="add" />
        <list @set=setfn @delete="deletefn" @checked="checked" :arr="arr" :running="true" />
        <list @delete="deletefn" @checked="checked" :arr="arr" :running="false" />
        <footerVue @clear="clear" />
    </div>
</template>
<script>
import { ref, reactive, watch } from 'vue'
import footerVue from './footer.vue'
import headerVue from './header.vue'
import list from './list.vue'
export default {
    components: {
        footerVue, headerVue, list
    },
    setup() {
        let arr = reactive(
            JSON.parse(localStorage.getItem('list')) || []
        )
        watch(arr, (newvalue, oldvalue) => {
            localStorage.setItem('list', JSON.stringify(newvalue))
        }, {
            deep: true
        })
        function clear() {
            arr.splice(0)
        }
        function add(value) {
            arr.push(
                {
                    title: value, 
                    flag: false
                }
            )
        }
        function checked(index) {
            arr[index].flag = !arr[index].flag
        }
        function deletefn(index) {
            arr.splice(index, 1)
        }
        function setfn(obj) {
            arr[obj.index].title = obj.value
        }
        return {
            arr,
            checked,
            add,
            deletefn,
            setfn,
            clear
        }
    },
}
</script>